<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv=X-UA-Compatible content="IE=edge">
    <meta name=format-detection content="telephone=no">
    <meta name=format-detection content="email=no">
    <meta name=apple-mobile-web-app-capable content=yes>
    <meta name=apple-mobile-web-app-status-bar-style content=black>
    <meta name=full-screen content=yes><meta name=browsermode content=application>
    <meta name=x5-orientation content=portrait><meta name=x5-fullscreen content=true>
    <meta name=x5-page-mode content=app>
    <meta content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=no, width=device-width" name="viewport">
    <title>解套活动</title>
    <script src="/common/vue.min.js"></script>
    <script src="/common/jquery.min.js"></script>
    <script src="/common/axios.min.js"></script>
    <link rel="stylesheet" href="/wap/activity/dynamic/jietao/index.css">
</head>
<body>
<div id="Solution">
    <header>
        <img src="/wap/activity/dynamic/jietao/images/1.png" alt="">
        <div v-if="isBuy === 2" class="but cook"></div>
        <div v-else-if="isBuy === 0" class="but" @click="getNew"></div>
        <div v-else class="but active"></div>
    </header>
    <section class="text">
        <div class="text-fall" v-if="contents">
            <p class="text-head">今日热股榜</p>
            <div class="text-sec">
                <ul class="text-ul-tit clear">
                    <li>股票</li>
                    <li>涨跌额</li>
                    <li>最新价</li>
                    <li><span class="red">涨幅</span></li>
                </ul>
                <ul class="text-ul-list clear" v-for="(item,index) in contents" :key="item.id" v-if="index<5">
                    <li>
                        <span v-text="item.prod_name"></span>
                        <span v-text="item.code"></span>
                    </li>
                    <li>
                        <span class="ju he">{{item.px_change | percents}}</span>
                    </li>
                    <li>
                        <span class="red he" v-text="item.last_px"></span>
                    </li>
                    <li>
                        <span class="red he">{{item.px_change_rate | percent}}</span>
                    </li>
                </ul>
            </div>
        </div>
        <div class="text-fall" v-if="theme">
            <p class="text-head">今日题材热点</p>
            <div class="text-sec">
                <ul class="text-ul-tit clear">
                    <li>板块名称</li>
                    <li>板块涨幅</li>
                    <li>龙头股</li>
                    <li><span class="red">涨幅</span></li>
                </ul>
                <ul class="text-ul-list clear" v-for="item in theme">
                    <li>
                        <span class="he" v-text="item.concept_name"></span>
                    </li>
                    <li>
                        <span class="ju he">{{item.concept_change_rate | percent }}</span>
                    </li>
                    <li>
                        <span class="red" v-text="item.led_prod_name"></span>
                        <span v-text="item.led_prod_code"></span>
                    </li>
                    <li>
                        <span class="red he">{{item.led_prod_change_rate | percent}}</span>
                    </li>
                </ul>
            </div>
        </div>
    </section>
    <footer>
        <img src="/wap/activity/dynamic/jietao/images/4.png" alt="">
    </footer>
</div>
<script th:inline="javascript">
    var baseUrl = [[${baseUrl}]];
</script>
<script src="/wap/activity/dynamic/jietao/index.js"></script>
<script>
    var Solution = new Vue({
        el: '#Solution',
        data: {
            contents: {},
            theme: {},
            isBuy: null
        },
        methods: {
            /*页面数据获取*/
            getNew: function () {
                var _this = this;
                axios.post(baseUrl + 'api/app/marketCourse/receive', {
                }).then(function (response) {
                    if(response.data.code === 20000){
                        if(response.data.data.isBuy === '1'){
                            _this.isBuy = 1;
                        }
                    }
                }).catch(function (error) {
                    console.log(error);
                });
            },
            postList: function () {
                var _this = this;
                axios.post(baseUrl + 'api/app/marketCourse/info', {
                }).then(function (response) {
                    if(response.data.code === 20000){
                        _this.isBuy = response.data.data.isReceive;
                    }
                }).catch(function (error) {
                    console.log(error);
                });
                axios.post(baseUrl + 'api/stock/market/concept/updown', {
                    sortType: -1,
                    startPos: 5
                }).then(function (response) {
                    if(response.data.code === 20000){
                        _this.theme = response.data.data;
                    }
                }).catch(function (error) {
                    console.log(error);
                });
                axios.post(baseUrl + 'api/stock/market/list/updown', {
                    sortType: 1,
                    startPos: 5
                }).then(function (response) {
                    if(response.data.code === 20000){
                        _this.contents = response.data.data;
                    }
                }).catch(function (error) {
                    console.log(error);
                });
            }
        },
        created: function (){
            this.postList();
        },
        filters: {
            data: function (input) {
                var d = new Date(input);
                var year = d.getFullYear();
                var month = d.getMonth() + 1;
                var day = d.getDate() < 10 ? '0' + d.getDate() : '' + d.getDate();
                var hour = d.getHours();
                var minutes = d.getMinutes();
                var seconds = d.getSeconds();
                return month + '-' + day + ' ' + hour + ':' + minutes + ':' + seconds;
            },
            toFixed: function (val) {
                return val.toFixed(2);
            },
            sizeShift: function (val) {
                var d = '';
                var t = 0;
                if (val.toString().length >= 0 && val.toString().length <= 4) {
                    d = '';
                    t = val;
                } else if (val.toString().length > 4 && val.toString().length <= 8) {
                    d = '万';
                    t = val / 10000;
                } else if (val.toString().length > 8 && val.toString().length <= 12) {
                    d = '亿';
                    t = val / 100000000;
                } else if (val.toString().length > 12 && val.toString().length <= 16) {
                    d = '兆';
                    t = val / 1000000000000;
                }
                return t.toFixed(1) + d;
            },
            percent: function (val) {
                return Number(val).toFixed(2) + '%';
            },
            percents: function (val) {
                return Number(val).toFixed(2);
            }
        },
        updated: function () {
        }
    });
</script>
</body>
</html>